import 'package:animate_do/animate_do.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// 组件
import 'package:chat_client/widgets/c_icon_btn.dart';
import 'package:chat_client/widgets/c_input.dart';

// provider
import 'package:chat_client/providers/login_provider.dart';
// 工具
import 'package:chat_client/utils/media_tools.dart';

class MobileLoginScreen extends StatelessWidget {
  const MobileLoginScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              _buildTopImage(context),
              Padding(
                padding: EdgeInsets.only(left: 40.0, right: 40.0, top: 4),
                child: ChangeNotifierProvider(
                  create: (_) => LoginProvider(),
                  child: const LoginForm(),
                ),
              ),
            ],
          ),
        ));
  }

  // 构建背景logo
  _buildTopImage(context) {
    return Container(
      height: 400,
      decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage('assets/images/background.png'),
              fit: BoxFit.fill)),
      child: Stack(
        children: <Widget>[
          _buildPositionedIcon(
              0, 30, 80, 200, 'assets/icons/light-1.png', 1000),
          _buildPositionedIcon(
              0, 140, 80, 150, 'assets/icons/light-2.png', 1200),
          _buildPositionedIcon(40, getMediaWidth(context) - 100, 80, 150,
              'assets/icons/clock.png', 1300),
          Positioned(
              child: FadeInUp(
                  duration: Duration(milliseconds: 1600),
                  child: Container(
                      margin: EdgeInsets.only(top: 50),
                      child: Center(
                          child: Text('echo',
                              style: TextStyle(
                                fontFamily: 'MysteryQuest',
                                fontSize: 100,
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                              )))))),
          Positioned(
            child: FadeInLeft(
                duration: Duration(milliseconds: 1600),
                child: Container(
                  margin: EdgeInsets.only(top: 200),
                  child: Center(
                    child: Text(
                      'chat_client - Connecting Voices',
                      style: TextStyle(
                        fontFamily: 'MysteryQuest',
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ),
                )),
          )
        ],
      ),
    );
  }

  Widget _buildPositionedIcon(
    double top,
    double left,
    double width,
    double height,
    String asset,
    int delay,
  ) {
    return Positioned(
      top: top,
      left: left,
      width: width,
      height: height,
      child: FadeInUp(
        duration: Duration(milliseconds: delay),
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage(asset),
            ),
          ),
        ),
      ),
    );
  }
}

//  登录表单
class LoginForm extends StatelessWidget {
  const LoginForm({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer<LoginProvider>(builder: (context, model, child) {
      return FadeInUp(
        duration: Duration(milliseconds: 1800),
        child: Padding(
          padding: EdgeInsets.all(5),
          child: Column(
            children: <Widget>[
              Container(
                padding: EdgeInsets.all(4),
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(10),
                    border: Border.all(
                        color: Color.fromRGBO(143, 148, 251, 1)
                            .withValues(alpha: .3)),
                    boxShadow: [
                      BoxShadow(
                          color: Color.fromRGBO(143, 148, 251, .2),
                          blurRadius: 20.0,
                          offset: Offset(0, 4))
                    ]),
                child: Column(
                  children: [
                    // 用户名输入框
                    InputField(
                      controller: model.usernameController,
                      hintText: '用户名',
                      icon: Icons.person,
                    ),
                    Divider(
                      height: 4,
                    ),
                    // 密码输入框
                    InputField(
                      controller: model.passwordController,
                      hintText: '密码',
                      isPassword: true,
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 24),
              FadeInUp(
                  duration: Duration(milliseconds: 1900),
                  child: SizedBox(
                    width: double.infinity,
                    child: ElevatedButton(
                      onPressed: () => model.login(),
                      child: const Text('登录'),
                    ),
                  )),
              SizedBox(height: 70),
              // 忘记密码和注册账号按钮行
              FadeInUp(
                duration: Duration(milliseconds: 2000),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    IconWithTextButton(
                        icon: Icons.phone_android,
                        label: '手机号登录',
                        onPressed: () {}),
                    IconWithTextButton(
                        icon: Icons.add,
                        label: '注册账号',
                        onPressed: () => model.navToRegister()),
                    IconWithTextButton(
                        icon: Icons.more_horiz,
                        label: '找回密码',
                        onPressed: () {}),
                  ],
                ),
              ),
            ],
          ),
        ),
      );
    });
  }
}
